<script>
export default {
  name: 'Screen'
}
</script>
<script setup>
import ScreenTop from './components/top/index.vue'
import ScreenBottom from './components/bottom/index.vue'
import debounce from 'lodash/debounce'
import { ref, onMounted } from 'vue'

onMounted(() => {
  resizeFn()
})

// ref
const screen = ref()

// 获取缩放比例
const getScale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  // console.log(window.innerWidth, w, ww)
  // console.log(window.innerHeight, h, wh)
  return ww > wh ? wh : ww
}

// 设置函数
const resizeFn = () => {
  if (screen.value) screen.value.style = `transform: scale(${getScale()}) translate(-50%, -50%);`
}

// 节流版本 设置函数
const debounceResizeFn = debounce(resizeFn, 200)

// 窗口变化
window.onresize = debounceResizeFn

// start
</script>

<template>
  <div class="container">
    <div
      class="screen"
      ref="screen"
    >
      <ScreenTop class="screenTop" />
      <ScreenBottom class="screenBottom" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('./images/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

  .screen {
    position: relative;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    // transform: translate(-50%, -50%) scale(0.8);

    $height: 40px;
    .screenTop {
      position: relative;
      width: 100%;
      height: $height;
      z-index: 12;
    }
    .screenBottom {
      position: relative;
      width: 100%;
      height: calc(100% - $height);
    }
  }
}
</style>
<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}
</style>
